import React, { useEffect, useState } from 'react'
import { useParams, useHistory } from 'react-router-dom'
import { Mask, Image } from 'antd-mobile'
import { getLibraryDetail } from './api/libraryService'

export default function LibraryDetail() {
    const { id }: any = useParams()

    // 图书馆列表详情
    const [libraryDetail, setLibraryDetail] = useState<any>({})
    // 蒙层
    const [visible, setVisible] = useState(false)
    // 显示的图片
    const [imgsrc, setImgsrc] = useState('')
    // 默认图片地址
    const defaultsrc = 'https://via.placeholder.com/400x300.png?text=Default+Image'

    // 获取图书馆详情
    async function getDetail() {
        const res = await getLibraryDetail(id)
        console.log(res)
        setLibraryDetail(res.data.data)
        setImgsrc('http://124.93.196.45:10001/' + res.data.data.mapUrl)
    }

    // 前往图书馆评论页
    const history = useHistory()
    function toComment() {
        history.push(`/library/comment/${id}`)
    }


    useEffect(() => {
        getDetail()
    }, [])

    return (
        <div>
            <div></div>
            <div className='library-detail-img'>
                {/* <img src={'http://124.93.196.45:10001/' + libraryDetail.imgUrl} onClick={() => setVisible(true)} /> */}
                <Image src={imgsrc} onClick={() => setVisible(true)} onError={() => setImgsrc(defaultsrc)} />
            </div>
            <div className='detail-text'>
                <div>{libraryDetail.name}</div>
                <div>{libraryDetail.address}</div>
                <div>{libraryDetail.description}</div>
                <div className='time-state'>
                    <div>{libraryDetail.businessHours}</div>
                    <div className={libraryDetail.businessState === "1" ? 'state-in' : 'state-out'}>{libraryDetail.businessState === '1' ? '正在营业' : '未营业'}</div>
                </div>
                <button className='view-comments' onClick={toComment}>查看评论</button>
            </div>
            <Mask visible={visible} onMaskClick={() => setVisible(false)} >
                <img className='big-img' src={'http://124.93.196.45:10001/' + libraryDetail.imgUrl} />
            </Mask>
        </div>
    )
}
